<template>
    <div class="text_contaner">
            <span class="binds_text_item"
            :class="isAnimation ? 'binds_animation' :''"
            v-for="(item,index) in texts"
            :key="index"
            :style="{
                animationDelay: `${Math.random() * 0.5}s`,
                animationPlayState:animationState,
                animationDuration: `${duration}s`
            }"
            @webkitAnimationStart="animationStart"
            @animationstart="animationStart"
            @webkitAnimationEnd="animationEnd"
            @animationEnd="animationEnd"
            >{{ item }}</span>

        <div class="binds_text_item"
            :class="isAnimation ? 'binds_animation' :''"
            :style="{
                animationDelay: `${Math.random() * 0.5}s`,
                animationPlayState: animationState,
                animationDuration:`${duration}s`
            }"
            >
            <slot></slot>
        </div>
    </div>
</template>

<script setup lang="ts">
import { debounce } from '../Autils/index';
import {CommonFn,getTextArr} from '../Ahooks/index'

defineOptions({
    name:'Binds'
})

const props = defineProps({
    text: {
        type: String,
        default:''
    },
    immediately: {
        type: Boolean,
        default:true
    },
    duration: {
        type: [String, Number],
        default:0.5
    } 
})

const { isAnimation,
        animationState,
        start,
        paused,
        rest
        } = CommonFn()

const {texts} = getTextArr(props)    

const emits = defineEmits(["onStart",'onEnd'])

const animationStart = debounce(() => {
            emits('onStart')
        })


const animationEnd = debounce(() => {
            emits('onEnd')
        })

if (props.immediately) {
    start()
} else {
    paused()
}
defineExpose({start,paused,rest})
</script>
<style lang="less" scoped>
@import url("~/ACommonLess/index.less");
@startPath:inset(0 100% 0 0);
@endPath:inset(0 0 0 0);

.binds_text_item{
    display: inline-block;
    clip-path: @startPath;
    opacity: 0;  
}

.binds_animation{
    animation-name: binds;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes binds {
    0%{
        clip-path: @startPath;
        opacity: 0;  
    }

    100%{
        clip-path: @endPath;
        opacity: 1;  
    }
}
</style>